* {
    margin: 0;
    padding: 0;
    list-style: none;
}

.clearfix:after {
    content: "";
    display: block;
    height: 8;
    clear: both;
    visibility: hidden;
}

a {
    text-decoration: none;
    color: #555;
}

i {
    display: inline-block;
}

.makeup {
    width: 100%;
}

.makeup-top {
    width: 100%;
    border-bottom: 2px solid #f42424;
    position: relative;
}



.site-mast {
    width: 1198px;
    height: 500px;
    /* background-color: rgba(0, 0, 0, 0.6); */
    position: absolute;
    top: 42px;
    left: 257px;
    display: none;
    z-index: 1;
}


.site-mast ul li .padding {
    padding: 14.7px;
    display: flex;

}

.activer-bgc {
    background-color: rgba(0, 0, 0, 1)
}

a.active-color {
    color: red;
}

.site-mast ul {
    width: 232px;
    background-color: rgba(0, 0, 0, 0.6);
    position: relative;
}

.site-mast ul li {
    /* display: flex; */
}

.categorys-items-layer .top span {
    font-size: 12px;
    background-color: #555;
    padding: 3px;
    color: white;
}

.categorys-items-layer {
    display: none;
    width: 966px;
    box-sizing: border-box;
    padding: 20px;
    min-height: 500px;
    background-color: white;
    position: absolute;
    top: 0;
    left: 232px;
}

.active-dis {
    display: block;
}

.categorys-items-layer .content dl {
    font-size: 12px;
    position: relative;
    padding: 10px 0;
}

.categorys-items-layer .content dl dt {
    position: absolute;
    top: 9px;
    left: 10px;

    width: 70px;
    text-align: center;
}

.categorys-items-layer .content dl dd {
    padding-left: 80px;
}

.categorys-items-layer .content dl dd a {
    text-decoration: none;
    color: #555;
    border-left: 1px solid #555;
    padding: 0 5px;
}

.site-mast ul li i {
    padding-top: 6px;
    color: #bfbfbf;
    margin-right: 10px;
}

.site-mast ul li .padding a {
    text-decoration: none;
    font-size: 14px;
    color: white;
}

.site-mast ul li p a {
    color: #bfbfbf;
}

.site-mast ul li a .makeup-left {
    width: 1390px;
    margin: 0 auto;
    height: 40px;
}

.makeup-left {

    width: 1390px;
    margin: 0 auto;

}

.makeup-left ul li {
    float: left;
    line-height: 40px;
    padding: 0 16px;
}

.makeup-left ul li a {
    text-decoration: none;
    color: #555;

}

.makeup-left ul li:hover a {
    color: red;
}

.makeup-left ul .red a {
    color: red;
}

.makeup-left .fenlei {
    width: 232px;
    height: 40px;
    color: white;
    font-weight: 600;
    text-align: center;
    line-height: 40px;
    background-color: #f42424;
    float: left;
}

.makeup .recommend {
    width: 1390px;
    display: flex;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 15px;
}

.makeup .recommend .recommend-left {
    width: 19px;
    background-color: #f42424;
    padding: 15px 10px;
    color: white;
}

.makeup .small-icon .flex div {
    border: 0 !important;
}

.recommend ul {
    display: flex;
    padding: 15px;
    background-color: #EEEEEE;
}

.recommend ul li {
    width: 310px;
    display: flex;
    box-sizing: border-box;
    padding: 10px;
    background-color: white;
    margin: 0 10px;
    border: 1px solid white;
}

.active-red {
    color: red;
}

.recommend ul .activer-ber {
    border: 1px solid #f42424;
}

.recommend ul li .Img {
    float: left;
    width: 90px;
    height: 90px;
}

.recommend ul li .red {
    color: #f42424;
}

.recommend ul li .go {
    font-size: 12px;
    color: wheat;
    height: 22px;
    width: 60px;
    text-align: center;
    line-height: 22px;
    background: #f42424;
}

.recommend ul li .content {
    flex: 3;
    margin-left: 14px;
}

.recommend ul li .content .content-text1 {
    font-size: 12px;
    color: #555;
}

.dressing {
    width: 1390px;
    display: flex;
    margin: 0 auto;
    margin-bottom: 15px;
}

.dressing div i {
    font-size: 12px;
}

.dressing .margin {
    font-size: 12px;
    margin-top: 7px;
}

.dressing .reght:last-child {
    margin-left: 5px;
}

.dressing>div {
    margin-right: 5px;
    padding: 5px;
    border: 1px solid #d2d2d2;
    font-size: 12px;
    vertical-align: middle;
}

.dressing .left {
    position: relative;
}

.dressing .left .border1 {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: white;
    display: none;
    z-index: 1;
}

.dressing .activer-ff {
    border: 1px solid #f42424;
    border-bottom: 0;
}

.dressing #left-buttom {
    line-height: 40px;
    display: none;
    width: 160px;
    height: 50px;
    position: absolute;
    border: 1px solid #f42424;
    top: 26px;
    left: -1px;
    background-color: white;
}

.makeup .brand {
    width: 1390px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    border: 1px dotted #d2d2d2;
    box-sizing: border-box;
    padding: 20px 25px;
}

.makeup .brand .maddle {
    display: flex;
}

.brand .flex {
    display: flex;
}

.brand .flex .left {
    margin-right: 60px;
}

.makeup .brand .right,
.makeup .brand .right i {
    display: flex;
    font-size: 12px;
    color: #d2d2d2;
}

.makeup .brand .right div {
    border: 1px solid #d2d2d2;
    height: 18px;
    margin-left: 10px;
    padding: 0 5px;
}

.makeup .brand .right i {
    border: 1px solid #d2d2d2;
    height: 12px;
    padding: 2px 2px;
}

.makeup .brand .maddle li {
    width: 118px;
    height: 52px;
    border: 1px solid #d2d2d2;
}


.makeup .give {
    width: 1390px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    border: 1px solid #d2d2d2;
    margin-top: 15px;
    box-sizing: border-box;
}

.makeup .give .left ul,
.makeup .give .right ul {
    display: flex;
    box-sizing: border-box;
    padding: 10px 20px;
}

.makeup .give .left ul li,
.makeup .give .left ul li i {
    font-size: 12px;

}

.makeup .give ul li {
    padding: 0 15px;
    border-right: 1px solid #d2d2d2;

}

.makeup .give ul li a {
    text-decoration: none;
    color: #555;
}

.makeup .give .left ul li span {
    vertical-align: middle;
    font-weight: 100;
}

.makeup .give .left ul li:last-child input {
    vertical-align: middle;
}

.makeup .give .left ul .pice input {
    width: 50px;
    color: #d2d2d2;
    padding: 0 5px;
    outline: 0;
}

.makeup .give .right ul li {
    font-size: 12px;
    display: flex;
}

.makeup .give .right ul li:first-child div {
    margin: 0 2px;
    border: 1px solid #d2d2d2;
}

.makeup .give .right ul li:first-child div i {
    font-size: 12px;
}

.makeup .goods {
    width: 1390px;
    position: relative;
    margin: 0 auto;
    display: flex;
    margin-top: 10px;
}

.makeup .goods ul .top {
    width: 210px;
    height: 210px;
}

.makeup .goods ul li {
    float: left;
    border: 1px solid white;
    padding: 11px;
    box-sizing: border-box;
    font-size: 12px;
    color: #555;
    width: 232px;
}

.makeup .goods ul .som {
    display: flex;
    margin-top: 10px;
    width: 26px;
    height: 26px;
}

.makeup .goods ul .som img {
    margin: 0 5px;
}

.makeup .goods ul .pice {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.makeup .goods ul .pice .pice-som {
    font-size: 18px;
    color: #f42424;
    font-weight: 800;
}

.makeup .goods ul .cbl {
    margin: 5px 0 10px 0;
}


.makeup .goods ul .flex {
    display: flex;
}

.makeup .goods ul .flex div {
    border: 1px solid #d2d2d2;
    padding: 2px;
}

.big-icon {
    display: block;
    flex: 1;
}


.makeup .ul-right {
    width: 212px;
    transition: 1s;
    margin-right: 0;
}

.makeup .ul-right .stift {
    width: 20px;
    height: 20px;
    background-color: #eee;
    margin: 12px 0;
    border: 1px solid #d2d2d2;
    transition: all 3s;
}

.makeup .goods-spread {
    width: 190px;
    flex-direction: column;
    border: 1px solid #d2d2d2;
    color: #d2d2d2;
    padding: 10px;
    transition: 1s;
}

.makeup .goods-spread ul li {
    width: 190px;
    float: none;
    padding: 0;
    margin-bottom: 10px;

}

.makeup .goods-spread .text {
    height: 30px;
}

.makeup .goods-spread ul li .top {
    width: 190px;
}

.makeup .link-love {
    width: 1390px;
    margin: 0 auto;
    margin-top: 60px;
}

.makeup .link-love .cnlink {
    width: 1390px;
    height: 1px;
    background: url(../images/dian-ico2.png);
    position: relative;
}

.makeup .link-love .cnlink h2 {
    position: absolute;
    top: -18px;
    left: 50%;
    margin-left: -48px;
    color: #d2d2d2;
}

.makeup .link-love ul {
    margin-top: 50px;
    display: flex;
    font-size: 12px;
    width: 1400px;
    justify-content: space-between;
}

.makeup .link-love ul li .Img {
    width: 190px;
    height: 190px;
}

.makeup .link-love ul li .pice {
    font-size: 18px;
    margin-bottom: 5px;
    margin-top: 3px;
    color: #f42424;
}

.makeup .goods ul li .mether {
    color: #bfbfbf;
    text-decoration: none;
}



.mengcheng {
    width: 100%;
    height: 1200px;
    background-color: rgba(85, 85, 85, 0.311);
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

.mengcheng>div {
    width: 500px;
    height: 100px;
    border: 20px solid yellowgreen;
    background-color: white;
    margin: 0 auto;
    margin-top: 20%;
    color: magenta;
    font-weight: 600;
}

.mengcheng>div div {
    text-align: center;
}

.mengcheng>div div button {
    width: 100px;
    height: 50px;
    margin-top: 20px;
}

.goods .small-icon {
    flex: 1;
    display: none;
}

.goods .small-icon li {
    display: flex;
    width: 1168px !important;
    justify-content: space-between;

}

.goods .small-icon li .Img-small-icon {
    width: 58px;
    border: 1px solid #bfbfbf;
    margin-right: 10px;
}

.goods .small-icon .flex-b {
    display: flex;
}

.goods .small-icon .flex-b .content {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.goods .small-icon .mbl {
    margin: 0 20px;
}

.goods .small-icon .pice {
    display: flex;
    align-items: center;
}

.goods .small-icon .pice .red {
    color: #f42424;
}

.goods .small-icon .pice #delel {
    text-decoration: line-through;
}

.goods .small-icon .contrast div {
    max-height: 19px;
    padding: 2px;
    margin: 0 5px;
    background-color: white;
}

.goods .small-icon .contrast {
    display: flex;
    align-items: center;
}

.goods .small-icon .top {
    height: 59px !important;
    width: 59px !important;
}

.goods .small-icon li:nth-child(even) {
    background-color: #f8f8f8;
}

.comparison {
    display: flex;
    width: 996px;
    height: 118px;
    border: 2px solid #f42424;
    position: fixed;
    top: 80%;
    left: 50%;
    margin-left: -580px;
    background-color: white;
    font-size: 12px;
    opacity: 0;
}

.comparison .text {
    width: 16px;
    height: 108px;
    padding: 0 10px;
    background-color: #f42424;
    padding-top: 10px;
    color: white;
    line-height: 30px;
}

.comparison .content {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

.comparison .content .Img {
    margin-right: 10px;
    width: 59px;
    height: 59px;
}

.comparison .content .Img img {
    margin-top: 10px;
}

.comparison .content .flex-weqp {
    width: 180px;
    box-sizing: border-box;
    padding: 0 10px;
    border-right: 1px solid #bfbfbf;
    display: flex;
    margin-left: 16px;
}

.comparison .content .flex-weqp .right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.hidden-File {
    box-sizing: border-box;
    padding: 10px 10px;
    position: absolute;
    top: 0;
    right: 0;
}

.hidden-File p {
    color: blue;
    text-align: right;

}

.hidden-File div:nth-of-type(1) {
    background-color: #f42424;
    margin: 10px 0;
    padding: 5px;
    color: white;
    text-align: center;
}

.clearfix ul li{
    cursor: pointer;
}